<template>
      <div>
           <div class="newBox">
            <ul>
              <li class="detailnews" v-for="(item, index) in newscontent.list" :key="index">
                <nuxt-link target="_blank" :to="'/post/' + item.pid"><span>{{item.name}}</span></nuxt-link>
                <span>{{item.createtime}}</span>
              </li>
            </ul>
        </div>
           <div class="block" style="text-align: center;">
                  <div class="block">
                   
                   <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage3"
                        :page-size="10"
                        layout="prev, pager, next, jumper"
                        :total="newsbox.total">
                  </el-pagination>
                  </div>
            </div>
      </div>
</template>

<script>
import api from '../static/js/api.js';
  export default {
    methods: {
      handleSizeChange(val) {
        this.getothernews(val)
      },
      handleCurrentChange(val) {
        this.getothernews(val)
      },
      getothernews(val){
          api.getCategoryPost({categoryName:this.newstype,page:val,pageSize:"10",orderBy:"createtime",orderByType:"desc"})
          .then((res)=>{  
           this.newscontent = res.data
          })
      }
    },
    props:{
      newsbox:{
        type:Object,
        default: function () {
          return {}
        }
      },
      newstype:{
        type:String,
        default:"宏观新闻"
      }
    },
    data() {
      return {
        currentPage3: 1,
        newscontent:this.newsbox
      };
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.detailnews{
  padding: 0 20px;
}

.newBox{
    overflow: hidden;
    background: whitesmoke;
    height: 364px;
    width: 100%;
    margin-bottom: 50px;
}
.newBox ul li a{
    width: 900px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
     text-overflow: none;
}
.newBox ul li{
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    color: #595757;
    font-size: 16px;
    line-height: 36px;
}
.newBox ul li a:hover{
    color: #cd9c54;
}

</style>
